<!--文本类查询-->
<template>
  <!--查询方式-->
  <div style="float:left;width:65px;text-align:center;">
    <find-kind :model="model"/>
  </div>
  <!--查询内容-->
  <div style="float:left;" :style="'width: ' + (120 * colCount - 10 ) + 'px;'">
    <component
      :is="findItemDict[itemMeta.controlType]"
      :model="model"
      v-bind="itemMeta"
      colName="value"
      @blur="myblur"
    >
    </component>
  </div>
  <transition name="el-zoom-in-center">
    <div v-show="model.useKind === 417"
      style="width:30px;float:left;"
    >
      至
    </div>
  </transition>
  <transition name="el-zoom-in-center">
    <div v-show="model.useKind === 417"
      :style="{width: (150 * colCount - 10 ) + 'px'}"
      style="float:left;"
    >
      <div style="float:left;" :style="{width: (150 * colCount - 40 ) + 'px'}">
        <component
          ref="domDate"
          :is="findItemDict[itemMeta.controlType]"
          :model="model"
          v-bind="itemMeta"
          colName="value2"
        >
        </component>
      </div>
    </div>
  </transition>
  <circle-close-filled
      v-if="itemMeta.controlType >= 150 && itemMeta.controlType <= 153 || itemMeta.controlType === 120 || itemMeta.controlType === 121"
      style="width: 1em; height: 1em; margin-left: 8px;"
      @click="clearValue()"
    />
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { CircleCloseFilled } from '@element-plus/icons-vue'

// 查询方式的控件
import selectFindKind from './s-findkind.vue'
 
// 查询子控件
import { findItem, findItemDict } from './_map-find-item'

// 引入表单子控件
import { formItem, formItemKey } from '../../form/item/_map-form-item'

/*
* 查询控件的子控件的外壳，存放 查询方式和查询子控件的容器
* * 查询方式
* * 容器
*/
export default defineComponent({
  name: 'el-find-item-shell',
  inheritAttrs: false,
  props: {
    model: Object,
    itemMeta: Object // 查询结果，数组形式
  },
  components: {
    'find-kind': selectFindKind,
    'circle-close-filled': CircleCloseFilled,
    ...formItem
  },
  setup (props, context) {
    // 表单子控件 to 查询子控件 的 字典
    // console.log('查询文本框===props', props, context)
    const findModel = props.model
    const itemMeta = props.itemMeta
    const domDate = ref(null)

    const colCount = computed(() => 
      (itemMeta.controlType === 150 || itemMeta.controlType === 151 ) ?
        2 : itemMeta.colCount )
    
    const myblur = () => {
      if (itemMeta.controlType === 110) {
        domDate.value.focus()
      }
    }
    
    // 清空查询条件，一个
    const clearValue = () => {
      if (Array.isArray(findModel.value)) {
        findModel.value.length = 0
      } else {
        switch (typeof findModel.value) {
          case 'string':
            findModel.value = ''
            break
          case 'boolean':
            findModel.value = ''
            break
          case 'number':
            findModel.value = ''
            break
        }
      }
    }

    
    return {
      colCount,
      findItemDict,
      domDate, // $ref
      clearValue, // 清空查询
      myblur // 失去焦点
    }
  }
})
</script>
